<template>
	<up-tabbar :value="value" @change="changeTabBar" fixed placeholder safeAreaInsetBottom>
		<up-tabbar-item :text="$t('home_tabBar')">
			<template #active-icon>
				<image class="tabbar-icon" src="/static/tabBar/index_active.png" />
			</template>
			<template #inactive-icon>
				<image class="tabbar-icon" src="/static/tabbar/index.png" />
			</template>
		</up-tabbar-item>
		<up-tabbar-item :text="$t('asset')">
			<template #active-icon>
				<image class="tabbar-icon" src="/static/tabBar/asset_active.png" />
			</template>
			<template #inactive-icon>
				<image class="tabbar-icon" src="/static/tabbar/asset.png" />
			</template>
		</up-tabbar-item>
	</up-tabbar>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	
	const props = defineProps({
		value: {
			type: Number,
			default: 0
		}
	})

	const changeTabBar = (index) => {
		if (props.value === index) return;
		switch (props.value) {
			case 0:
				uni.redirectTo({
					url: '/pages/my_actions/index'
				});
				break;
			case 1:
				uni.redirectTo({
					url: '/pages/index_actions/index'
				});
				break;
			default:
				break;
		}
	}
</script>

<style lang="scss" scoped>
	.tabbar-icon {
		width: 44rpx;
		height: 44rpx;
	}
</style>